<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>

<primus:page title="组合商品">
    <jsp:attribute name="css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css">
        <style type="text/css">

        </style>
    </jsp:attribute>

    <jsp:attribute name="script">
        <script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js"></script>
        <script src="https://cdn.bootcss.com/foundation/5.5.3/js/vendor/modernizr.js"></script>
        <script type="application/javascript">
            $(document).ready(function() {
                $(document).foundation();
            })
            function delLine(){
                alert(1);
            }
            function initDate(){
                var cat = $("#cat-table tbody tr");
                $("#editTable tbody").html("");
                $("#productNames").val("");
                $("#productCodes").val("");

                var pns = [];
                var pcs = [];
                cat.each(function(){
                    if ($(this).find("[name='cat-table']")[0].checked){
                        var productId = $($(this).find("td")[1]).text();
                        var productName = $($(this).find("td")[2]).text();
                        pns.push(productName);
                        pcs.push(productId);
                        var html = "<tr id='tr-'"+productId+">" +
                                       "<td>"+productId+"</td>"+
                                       "<td>"+productName+"</td>"+
                                       "<td><input type='text' name='quantity' value=''/></td>"+
                                       "<td><input type='text' name='priceFactor' value=''></td>"+
                                       "<td>" +
                                            "<div class='hidden-sm hidden-xs btn-group'>"+
                                                "<a href='' class='btn btn-minier btn-info'></a>"+
                                                "<i class='ace-icon fa fa-ban bigger-120'></i>"
                                            "</div>"+
                                       "</td>"+
                                   "</tr>";
                        $("#editTable tbody").append(html);
                    }
                });
                $("#productNames").val(pns.join(","));
                $("#productCodes").val(pcs.join(","));
                $('#myModal').modal('hide');
            }
            //保存
            function save(){
                var type = '${type}';
                var id = '${id}';

                var productCode = $("#productCode").val();//组合商品code
                var productJson = [];
                $("#editTable tbody tr").each(function(){
                    var pj = {};
                    var productId = $($(this).find("td")[0]).text();
                    var productName = $($(this).find("td")[1]).text();
                    var quantity = $($(this).find("td")[2]).find("input").val();
                    var priceFactor = $($(this).find("td")[3]).find("input").val();
                    pj.productId = productId;
                    pj.productName = productName;
                    pj.quantity = quantity;
                    pj.priceFactor = priceFactor;
                    productJson.push(pj);
                });

                var url = "management/groupProductController/save";
                $.ajax({
                    url:url,
                    type:"post",
                    dataType:"json",
                    data:{
                        productCode:productCode,
                        productJson:JSON.stringify(productJson),
                        type:type,
                        id:id
                    },success:function(data){

                    },error:function(){
                        layer.alert("服务器出错", 2);
                    }
                });

            }
        </script>
    </jsp:attribute>

    <jsp:body>

        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    商品管理
                </li>
                <li class="active">
                    组合商品
                </li>
            </ul>
            <a class="btn btn-xs btn-primary history-back">
                <i class="ace-icon fa fa-angle-left"></i>
                返回
            </a>
        </div>

        <div class="page-content">
            <h3 class="header smaller lighter blue">
                组合商品
            </h3>
            <div class="row">
                <div class="col-xs-12">

                    <form action="management/groupProductController/save" method="post" class="form-horizontal" role="form">
                        <input type="hidden" name="id" value="${brand.id}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="name">
                                组合商品ID
                            </label>
                            <div class="col-sm-9">
                                <input id="productCode" type="text" name="productCode" placeholder="组合商品ID"
                                       maxlength="200" minlength="1" value='<c:out value="${groupProduct.productCode}"/>'
                                       class="required text col-xs-12 col-sm-12" <c:if test="${type == '1'}">readonly="readonly"</c:if>  />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="name">
                                要选择的商品
                            </label>
                            <div class="col-sm-9">
                                <input id="productNames" type="text" name="productNames" placeholder="请选择商品"
                                       maxlength="200" minlength="1" value='<c:out value="${groupProduct.productNames}"/>'
                                       class="required text col-xs-12 col-sm-12"
                                       data-target="#myModal" data-toggle="modal">
                                <input id="productCodes" type="hidden" name="productCodes" value="${groupProduct.productCodes}">
                            </div>
                        </div>
                        <div class="form-group">
                            <table id="editTable" class="table table-hover">
                                <thead>
                                <tr>
                                    <th>商品ID</th>
                                    <th>商品名称</th>
                                    <th>数量</th>
                                    <th>价格百分比</th>
                                    <th>操作</th>
                                </tr>
                                </thead>

                                <tbody>
                                <c:forEach items="${groupProduct.item}" var="item">
                                    <tr id="tr-${item.id}">
                                        <td><c:out value="${item.productId}"/></td>
                                        <td><c:out value="${item.productName}"/></td>
                                        <td><c:out value="${item.quantity}"/></td>
                                        <td><c:out value="${item.priceFactor}"/></td>
                                        <td>
                                            <div class="hidden-sm hidden-xs btn-group">
                                                <input class="btn btn-minier btn-info" onclick="delLine()">
                                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                                </input>
                                            </div>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <div class="form-group">
                        </div>
                        <sec:authorize access="hasAuthority('OPT_BRAND_UPDATE')">
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">

                                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>

                                    &nbsp; &nbsp; &nbsp;

                                    <button class="btn" type="reset">
                                        <i class="ace-icon fa fa-undo bigger-110"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </sec:authorize>
                    </form>

                    <!-- 弹框 -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <table id="cat-table" class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" onclick="this.checked?selectall('cat-table',true):selectall('cat-table',false)" />
                                            </th>
                                            <th>商品ID</th>
                                            <th>商品标题</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach items="${productList}" var="item">
                                            <tr id="tr-${item.id}">
                                                <td><input type="checkbox" name="cat-table" data="${item.id}--${result}"  <c:if test="${fn:contains(result,item.id)}">checked="checked"</c:if>/></td>
                                                <td><c:out value="${item.id}"/></td>
                                                <td><c:out value="${item.name}"/></td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" onclick="initDate()">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 弹框 -->

                </div>
            </div>
        </div>
    </jsp:body>
</primus:page>
